import React from 'react'
import { changeNav } from '../../actions'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import { ajaxGet,ajaxPost ,ajaxPut} from '../../common/jsajaxservice.js'
import { List,WhiteSpace,WingBlank,Button,InputItem,Flex,Toast } from 'antd-mobile'
import hhistory from '../../history'
import styles from './../tenant.less'
import CSSModules from 'react-css-modules'

const Item = List.Item;
@CSSModules(styles, { allowMultiple: false })
class NewStuff extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            stuffInfo:{},
            status:0,
            inputType:0
        }
    }
	componentDidMount(){

		if(sessionStorage.getItem('stuff')){
	    	let stuff = JSON.parse(sessionStorage.getItem('stuff'))
			console.log(stuff)
	    	this.setState({
                stuffInfo:stuff,
                status:stuff.status,
				inputType:stuff?1:0
			})
		}
        this.props.tochangeNav({title:sessionStorage.getItem('stuff')?"修改员工":'新增员工'})
	}
    componentWillUnmount(){
		sessionStorage.removeItem('stuff')
	}
	toggleStatus() {
		this.setState({
            status:!this.state.status
		})
	}
	postStuffData(data) {
        ajaxPost('sys/user',data).then(res=>{
        	if(res.code == 0){
                Toast.success('添加'+res.msg,2,()=>{
                    hhistory.push('/stuffManage')
				})
			}else{
                Toast.fail(res.msg,2)
			}
		})
	}
    putStuffData(data) {
        ajaxPut('sys/user/'+this.state.stuffInfo.mobile,data).then(res=>{
            if(res.code == 0){
                Toast.success('修改'+res.msg,2,()=>{
                    hhistory.push('/stuffManage')
                })
            }else{
                Toast.fail(res.msg,2)
            }
        })
    }
	render(){
		const stuff = this.state.stuffInfo;
        const { getFieldProps} = this.props.form
		return(
			<div>
				<WhiteSpace size="lg" />
					<div style={{ textAlign:"center" }}>
						<img style={{ width:"150px",height:"150px" }} src="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"/>
					</div>
				<WhiteSpace size="lg" />
				<List>
					<InputItem
						styleName="am-list"
						value={stuff.fullname}
                        {...getFieldProps('fullname',{
                            initialValue:stuff.fullname,
                            rules: [{required: true}]
						})}
			            clear
			            placeholder="姓名"
			            autoFocus
			        >姓名</InputItem>
			    </List>
			    <WhiteSpace size="lg" />
			    <List>
					<InputItem
						styleName="am-list"
                        {...getFieldProps('mobile',{
                            initialValue:stuff.mobile,
                            rules: [{required: true}]
                        })}
			            clear
			            placeholder="员工电话号码"
			            autoFocus
			        >手机号</InputItem>
			        <InputItem
						styleName="am-list"
                        {...getFieldProps('email',{
                            initialValue:stuff.email
                        })}
			            clear
			            placeholder="邮箱地址"
			            autoFocus
			        >邮箱</InputItem>
			    </List>
			    <WhiteSpace size="lg" />
			    <List>
					<InputItem
						styleName="am-list"
                        {...getFieldProps('password')}
			            clear
						type='password'
			            placeholder="x位数密码"
			            autoFocus
			        >密码</InputItem>
			    </List>
			    <WhiteSpace size="lg" />
			    <WingBlank size="md">
			        <Flex>
				      <Flex.Item  style={{display:this.state.inputType?'block':'none'}}>
				      	<Button onClick={this.toggleStatus.bind(this)}>{this.state.status?'开启':'关闭'}</Button>
				      </Flex.Item>
				      <Flex.Item>
				      	<Button type="primary"
								onClick={
                                    () => {
                                        this.props.form.validateFields(( error,value )=>{
                                            if( error ){
                                                Toast.info('请填写必填项')
                                                return
                                            }
                                            let data = {
                                                fullname:value.fullname,
                                                password:value.password,
                                                mobile:value.mobile,
                                                email:value.email
											}
                                            if(this.state.inputType){
                                                data.status = +this.state.status
												this.putStuffData(data)
											}else {
                                                this.postStuffData(data)
											}
                                        })
                                    } }>{this.state.inputType?'修改':'保存'}</Button>
				      </Flex.Item>
				    </Flex>
			    </WingBlank>

			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	  
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) )
})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( NewStuff ))